<script setup>
import axios from 'axios';
import { onMounted } from 'vue'
import { useRouter,useRoute,RouterLink } from 'vue-router'
import ButtonVue from '../button/button.vue';

const router = useRouter();
var cardInfo = ref("");
const express = require('express');
const app = express();


onMounted(()=>{
    axios.get('http://localhost:8080/user/findInfoController',{
        params:{
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userNumber: token.userNumber,
            userId: token.userId,
            accountNumber:'6300000000000000123'
        }
    })
    .then((resp)=>{
        alert(resp)
        if(resp.code==200){
            cardInfo = resp.data.datas
        }else if(resp.code==400){
            router.push({path:''})
        }
    })
    .catch((e)=>{
        router.push({path:'/login'})
    })
})
</script>

<template>
    <div v-if="cardInfo!=null" class="box">
        <h2>客户信息</h2>
        <div class="info-box">
            <li>
                <span>客户编号</span>
                <p>83000000</p>
            </li>
            <li>
                <span>姓名</span>
                <p>张三</p>
            </li>
            <li>
                <span>英文名</span>
                <p>Zhang San</p>
            </li>
            <li>
                <span>登录编号</span>
                <p>SB1234567</p>
            </li>
            <li>
                <span>性别</span>
                <p>M</p>
            </li>
            <li>
                <span>地址</span>
                <p>宇宙--可观测宇宙--Laniakea超星系团--室女超星系团--本星系片--本星系群--银河系小群--银河系--猎户臂-古尔德带＞本地泡＞本星际云＞太阳系＞地月系＞地球</p>
            </li>
            <li>
                <span>手机号</span>
                <p>17689923441</p>
            </li>
            <li>
                <span>邮箱</span>
                <p>zhangsan@168.com</p>
            </li>
            <li>
                <span>公司地址</span>
                <p>河西,天津,中国</p>
            </li>
            
        </div>

        <h2>账户信息</h2>
        <div class="info-box">
            <li>
                <span>账户</span>
                <p>6300111122223333456</p>
            </li>
            <li>
                <span>账户类型</span>
                <p>A</p>
            </li>
            <li>
                <span>货币类型</span>
                <p>RMB</p>
            </li>
            <li>
                <span>账户金额</span>
                <p>99,999,999.99</p>
            </li>
            <li>
                <span>可用金额</span>
                <p>9.99</p>
            </li>
        </div>
        <ButtonVue btn-name="绑定当前账户到电子钱包" btn-color="blue"></ButtonVue>
        
    </div>
</template>
<style scoped>
*{
    margin: 0;
    list-style: none;
}
.box{
    padding-top: 10px;
    /* margin-top: 60px; */
    background-color: rgb(241, 240, 240);
}
h2{
    margin: 0px 10px 10px;
    font:normal 400 16px 'Serif';
}
.info-box{
    margin: 0 10px 10px;
    background-color: #fff !important;
}
.info-box::after{
    display: block;
    content: "";
    clear: both;
}
li{
    width: 100%;
    border-top: 1px solid lightgray;
}
li::after{
    display: block;
    content: "";
    clear: both;
}
span,p{
    padding: 5px
}
span{
    float: left;
    width: 26%;
    color: rgb(128, 127, 127);
    text-indent: 12px;
}
p{
    float:right;
    width: 64%;
    color: rgb(19, 173, 224);
}
</style>